<template>
  <view class="zmShow">
    <!-- <van-notify id="van-notify" top=300/> -->
    <van-notice-bar
      left-icon="volume-o"
      text="申请信息提交暂不能修改,请仔细填写每一条,确保无误再提交,给你带来的不便敬请谅解!"
    />
    <van-toast id="van-toast" />
    <van-notify id="van-notify" />
    <view v-if="type == 1 && type">
      <form @submit="formSubmit">
        <view class="set-box1">
          <text class="set-tex1">姓名</text>
          <input
            type="text"
            class="set-inp"
            placeholder="输入您的姓名"
            name="name"
            disabled
            :value="userinfo.bdname"
            @input="formModel('bdname', $event)"
          />
        </view>

        <view class="set-box1">
          <text class="set-tex1">身份证号码</text>
          <input
            type="text"
            class="set-inp"
            placeholder="输入您的身份证号"
            name="idcard"
            disabled
            :value="userinfo.bdsfz"
            @blur="getjsdw"
          />
        </view>

        <view class="set-box1">
          <text class="set-tex1">选择在职单位</text>
        </view>

        <view>
          <radio-group class="radio-group" @change="radioChange">
            <!-- <label class="radio" v-for="(item, index) in items" :key="index">
              <radio :value="item.jsdwid" />{{ item.jsdwname }}
             
            </label> -->
            <label class="radio" v-for="(item, index) in items" :key="index">
              <radio :value="item.jsdwid" :checked="item.jsdwid == jsdwid" />{{ item.jsdwname }}
            </label>
          </radio-group>
        </view>
        <view class="set-box1">
          <text class="set-tex2">选择是否邮寄</text>
          <van-radio-group :value="radioz" @change="onChange">
            <view class="radio-group2">
              <van-radio name="0" checked-color="#07c160">自取</van-radio>
              <van-radio name="1" checked-color="#07c160">快递到付</van-radio>
              <van-radio name="2" checked-color="#07c160">在线下载</van-radio>
            </view>
          </van-radio-group>
        </view>
        <view v-if="isshow">
          <view class="set-box1">
            <text class="set-tex1">*收件人姓名</text>
            <input
              type="text"
              class="set-inp"
              placeholder="输入收件人姓名"
              name="yj_name"
              :value="userinfo.yj_name"
              @input="formModel('yj_name', $event)"
            />
          </view>
          <view class="set-box1">
            <text class="set-tex1">*收件人电话</text>
            <input
              type="text"
              class="set-inp"
              placeholder="输入收件人电话"
              name="yj_tel"
              :value="userinfo.yj_tel"
              @input="formModel('yj_tel', $event)"
            />
          </view>
          <view class="set-box1">
            <text class="set-tex1">*收件人地址</text>
            <input
              type="text"
              class="set-inp"
              placeholder="输入收件人地址"
              name="yj_dizhi"
              :value="userinfo.yj_dizhi"
              @input="formModel('yj_dizhi', $event)"
            />
          </view>
        </view>
        <button :loading="loading" class="set-btn" formType="submit" :disabled="showjs == 1">申请工作证明</button>
      </form>
    </view>

    <view v-else-if="type == 2 && type">
      <form @submit="formSubmitbk" bindreset="formReset">
        <view class="set-box1">
          <text class="set-tex1">姓名</text>
          <input
            type="text"
            class="set-inp"
            placeholder="输入您的姓名"
            name="name"
            disabled
            :value="userinfo.bdname"
            @input="formModel('bdname', $event)"
          />
        </view>

        <view class="set-box1">
          <text class="set-tex1">身份证号码</text>

          <input
            type="text"
            class="set-inp"
            placeholder="输入您的身份证号"
            name="idcard"
            disabled
            :value="userinfo.bdsfz"
            @blur="getjsdwbk"
          />
        </view>

        <view class="set-box1">
          <text class="set-tex1">所报考试</text>
          <input
            type="text"
            class="set-inp"
            placeholder="输入考试名称"
            name="kaoshi"
            :value="userinfo.kaoshi"
            @input="formModel('kaoshi', $event)"
          />
        </view>

        <view class="set-box1">
          <text class="set-tex1">选择在职单位</text>
        </view>

        <radio-group class="radio-group" @change="radioChangebk" name="bkjsdw">
          <label class="radio" v-for="(item, index) in itemsbk" :key="index">
            <radio :value="item.jsdwid" :checked="item.jsdwid == jsdwidbk" />{{ item.jsdwname }}
          </label>
        </radio-group>
        <view class="set-box1">
          <text class="set-tex2">选择是否邮寄</text>
          <van-radio-group :value="radioz" @change="onChange">
            <view class="radio-group2">
              <van-radio name="0" checked-color="#07c160">自取</van-radio>
              <van-radio name="1" checked-color="#07c160">邮寄</van-radio>
              <van-radio name="2" checked-color="#07c160">在线下载</van-radio>
            </view>
          </van-radio-group>
        </view>
        <view v-if="isshow">
          <view class="set-box1">
            <text class="set-tex1">*收件人姓名</text>
            <input
              type="text"
              class="set-inp"
              placeholder="输入收件人姓名"
              name="yj_name"
              :value="userinfo.yj_name"
              @input="formModel('yj_name', $event)"
            />
          </view>
          <view class="set-box1">
            <text class="set-tex1">*收件人电话</text>
            <input
              type="text"
              class="set-inp"
              placeholder="输入收件人电话"
              name="yj_tel"
              :value="userinfo.yj_tel"
              @input="formModel('yj_tel', $event)"
            />
          </view>
          <view class="set-box1">
            <text class="set-tex1">*收件人地址</text>
            <input
              type="text"
              class="set-inp"
              placeholder="输入收件人地址"
              name="yj_dizhi"
              :value="userinfo.yj_dizhi"
              @input="formModel('yj_dizhi', $event)"
            />
          </view>
        </view>

        <button :loading="loading" class="set-btnbk" formType="submit" :disabled="showjs == 1">申请报考证明</button>
      </form>
    </view>
    <view v-else-if="type == 3 && type">
      <form @submit="formSubmit" bindreset="formReset">
        <view class="set-box1">
          <text class="set-tex1">姓名</text>
          <input
            type="text"
            class="set-inp"
            placeholder="输入您的姓名"
            name="name"
            disabled
            :value="userinfo.bdname"
            @input="formModel('bdname', $event)"
          />
        </view>

        <view class="set-box1">
          <text class="set-tex1">身份证号码</text>
          <input
            type="text"
            class="set-inp"
            placeholder="输入您的身份证号"
            name="idcard"
            :value="userinfo.bdsfz"
            disabled
            @blur="getjsdw"
          />
        </view>

        <view class="set-box1">
          <text class="set-tex1">选择在职单位</text>
        </view>

        <view>
          <radio-group class="radio-group" @change="radioChange">
            <label class="radio" v-for="(item, index) in items" :key="index">
              <radio :value="item.jsdwid" :checked="item.jsdwid == jsdwid" />{{ item.jsdwname }}
            </label>
          </radio-group>
        </view>
        <view class="set-box1">
          <text class="set-tex2">选择是否邮寄</text>
          <van-radio-group :value="radioz" @change="onChange">
            <view class="radio-group2">
              <van-radio name="0" checked-color="#07c160">自取</van-radio>
              <van-radio name="1" checked-color="#07c160">邮寄</van-radio>
              <van-radio name="2" checked-color="#07c160">在线下载</van-radio>
            </view>
          </van-radio-group>
        </view>
        <view v-if="isshow">
          <view class="set-box1">
            <text class="set-tex1">*收件人姓名</text>
            <input
              type="text"
              class="set-inp"
              placeholder="输入收件人姓名"
              name="yj_name"
              :value="userinfo.yj_name"
              @input="formModel('yj_name', $event)"
            />
          </view>
          <view class="set-box1">
            <text class="set-tex1">*收件人电话</text>
            <input
              type="text"
              class="set-inp"
              placeholder="输入收件人电话"
              name="yj_tel"
              :value="userinfo.yj_tel"
              @input="formModel('yj_tel', $event)"
            />
          </view>
          <view class="set-box1">
            <text class="set-tex1">*收件人地址</text>
            <input
              type="text"
              class="set-inp"
              placeholder="输入收件人地址"
              name="yj_dizhi"
              :value="userinfo.yj_dizhi"
              @input="formModel('yj_dizhi', $event)"
            />
          </view>
        </view>
        <button :loading="loading" class="set-btn" formType="submit" :disabled="showjs == 1">申请离职证明</button>
      </form>
    </view>
    <view v-else-if="type == 4 && type">
      <form @submit="formSubmit" bindreset="formReset">
        <view class="set-box1">
          <text class="set-tex1">姓名</text>
          <input
            type="text"
            class="set-inp"
            placeholder="输入您的姓名"
            name="name"
            :value="userinfo.bdname"
            disabled
            @input="formModel('bdname', $event)"
          />
        </view>
        <view class="set-box1">
          <text class="set-tex1">身份证号码</text>
          <input
            type="text"
            class="set-inp"
            placeholder="输入您的身份证号"
            name="idcard"
            :value="userinfo.bdsfz"
            disabled
            @blur="getjsdw"
          />
        </view>

        <view class="set-box1">
          <text class="set-tex1">选择在职单位</text>
        </view>

        <view>
          <radio-group class="radio-group" @change="radioChange">
            <label class="radio" v-for="(item, index) in items" :key="index">
              <radio :value="item.jsdwid" :checked="item.jsdwid == jsdwid" />{{ item.jsdwname }}
            </label>
          </radio-group>
        </view>
        <view class="set-box1">
          <text class="set-tex2">选择是否邮寄</text>
          <van-radio-group :value="radioz" @change="onChange">
            <view class="radio-group2">
              <van-radio name="0" checked-color="#07c160">自取</van-radio>
              <van-radio name="1" checked-color="#07c160">邮寄</van-radio>
              <van-radio name="2" checked-color="#07c160">在线下载</van-radio>
            </view>
          </van-radio-group>
        </view>
        <view v-if="isshow">
          <view class="set-box1">
            <text class="set-tex1">*收件人姓名</text>
            <input
              type="text"
              class="set-inp"
              placeholder="输入收件人姓名"
              name="yj_name"
              :value="userinfo.yj_name"
              @input="formModel('yj_name', $event)"
            />
          </view>
          <view class="set-box1">
            <text class="set-tex1">*收件人电话</text>
            <input
              type="text"
              class="set-inp"
              placeholder="输入收件人电话"
              name="yj_tel"
              :value="userinfo.yj_tel"
              @input="formModel('yj_tel', $event)"
            />
          </view>
          <view class="set-box1">
            <text class="set-tex1">*收件人地址</text>
            <input
              type="text"
              class="set-inp"
              placeholder="输入收件人地址"
              name="yj_dizhi"
              :value="userinfo.yj_dizhi"
              @input="formModel('yj_dizhi', $event)"
            />
          </view>
        </view>

        <button :loading="loading" class="set-btn" formType="submit" :disabled="showjs == 1">申请收入证明</button>
      </form>
    </view>
    <view v-else-if="type == 5">
      <Pact
        :formModel="formModel"
        :formSubmit="formSubmit"
        :getjsdw="getjsdw"
        :radioChange="radioChange"
        :items="items"
        :showjs="showjs"
        :jsdwid="jsdwid"
        :userinfo="userinfo"
      ></Pact>
    </view>
    <van-dialog
      :use-slot="true"
      :use-title-slot="true"
      :show="show"
      :confirm-button-open-type="getUserInfo"
      confirmButtonText="已了解"
      @close="onClose"
      :width="320"
      zIndex="999999999999999"
      @getuserinfo="getUserInfo"
    >
      <slot-view name="title"><view class="Ztitle">收费说明</view> </slot-view>
      <view v-html="sfsm"></view>
    </van-dialog>
    <view class="skm" @tap="skm">
      <image src="@assets/skm.png" mode="widthFix" />
      <view>收费说明</view>
    </view>
  </view>
</template>

<script>
import Taro from '@tarojs/taro';
import { Current } from '@tarojs/taro';
import { jsdw, gzzmadd, bkzmadd, lzzmadd, srzmadd } from '@api/zm';
import { homeInfo } from '@api/home';
import Toast from '@components/vant/toast/toast';
import Notify from '@components/vant/notify/notify';
import Pact from './components/pact/index';

// import { delete } from 'node_modules/vue/types/umd';
export default {
  // Taro.getStorageSync('kfwxh', kfwxh);
  //     Taro.setStorageSync('kfewm', kfewm);
  components: {
    Pact,
  },
  data() {
    const kfwxh = Taro.getStorageSync('kfwxh');
    const kfewm = Taro.getStorageSync('kfewm');
    return {
      isYj: false,
      show: false,
      radioz: '0',
      kfwxh,
      kfewm,
      type: '',
      params: '',
      userinfo: [],
      region: [],
      index: 0,
      birthday: '',
      gsid: 0,
      currentTab: 0,
      showjs: 1,
      items: [],
      itemsbk: [],
      jsdwidbk: '',
      youji: '',
      jsdwid: '',
      sfsm: '',
      loading: false,
    };
  },
  computed: {
    isshow() {
      return this.radioz === '1';
    },
  },
  methods: {
    call() {
      Taro.makePhoneCall({
        phoneNumber: '0898-66729613',
      });
    },
    longpress() {
      console.log([this.kfewm]);
      Taro.previewImage({
        current: [this.kfewm], // 当前显示图片的http链接
        urls: [this.kfewm], // 当前显示图片的http链接
        showmenu: true,
      });
    },
    skm() {
      this.show = true;
    },
    getUserInfo() {},
    onClose() {
      this.show = false;
    },
    formModel(name, e) {
      console.log(name, e);
      this.userinfo[name] = e.detail.value;
    },
    onChange(e) {
      console.log(e.detail);
      this.radioz = e.detail;
      // this.show = true;
    },
    radioChange: function (e) {
      this.jsdwid = e.detail.value;
      console.log(this.jsdwid, 'jsdwid12133');
    },
    radioChangebk: function (e) {
      this.jsdwidbk = e.detail.value;
    },
    formSubmitbk: function (e) {
      console.log(e, '......................');
      let formdata = e.detail.value;
      delete formdata[0];
      delete formdata[1];
      // formdata.jsdwid = this.jsdwidbk;
      formdata.jsdwid = this.jsdwidbk;
      formdata.youji = this.radioz;
      let { yj_dizhi, yj_name, yj_tel } = e.detail.value;
      let errinfo = '';
      if (this.radioz == 1) {
        if (yj_dizhi == '') {
          errinfo = errinfo.concat('收货地址不能为空', ' ', ' ');
        }
        if (yj_name == '') {
          errinfo = errinfo.concat('收件人姓名不能为空', ' ', ' ');
        }
        if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}/.test(yj_tel)) {
          errinfo = errinfo.concat('手机号码格式错误', ' ', ' ');
        }
        if (errinfo) {
          Notify(`${errinfo},请重新输入`);
          return;
        }
      }
      this.showjs = 1;
      this.loading = true;
      bkzmadd({ formdata: formdata })
        .then((res) => {
          if (!res.code) {
            // Toast(res.msg);
            this.userinfo = [];
            this.items = [];
            this.showjs = 1;
            Toast({
              message: res.msg,
              onClose: () => {
                let { zmid, num } = res.data;
                let type = this.type;
                let youji = this.radioz;
                // this.show = true;
                this.$store.dispatch('zmlist/getZmlist');
                Taro.navigateTo({
                  url: `/pages/checkout/index?zmid=${zmid}&zmtype=${type}&paynum=${num}&youji=${youji}`,
                });
              },
            });
          }
        }).catch(()=>{
           this.showjs = 0;
        })
        .finally(() => {
         
          this.loading = false;
        });
    },
    switch(formdata) {
      if (this.type == 1) {
        return gzzmadd({ formdata: formdata });
      } else if (this.type == 3) {
        return lzzmadd({ formdata: formdata });
      } else if (this.type == 4) {
        formdata.zm_type = this.params;
        return srzmadd({ formdata: formdata });
      }
    },
    formSubmit: function (e) {
      let formdata = e.detail.value;
      formdata.jsdwid = this.jsdwid;
      formdata.youji = this.radioz;
      delete formdata[0];
      delete formdata[1];
      let { yj_dizhi, yj_name, yj_tel } = e.detail.value;
      let errinfo = '';
      if (this.radioz == 1) {
        if (yj_dizhi == '') {
          errinfo = errinfo.concat('收货地址不能为空', ' ', ' ');
        }
        if (yj_name == '') {
          errinfo = errinfo.concat('收件人姓名不能为空', ' ', ' ');
        }
        if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}/.test(yj_tel)) {
          errinfo = errinfo.concat('手机号码格式错误', ' ', ' ');
        }
        if (errinfo) {
          Notify(`${errinfo},请重新输入`);
          return;
        }
      }
      this.showjs = 1;
      this.loading = true;
      this.switch(formdata)
        .then((res) => {
          if (!res.code) {
            this.userinfo = [];
            this.items = [];

            this.$store.dispatch('zmlist/getZmlist');
            Toast({
              message: res.msg,
              onClose: () => {
                let { zmid, num } = res.data;
                let type = this.type;
                let youji = this.radioz;
                // this.show = true;
                Taro.navigateTo({
                  url: `/pages/checkout/index?zmid=${zmid}&zmtype=${type}&paynum=${num}&youji=${youji}`,
                });
              },
            });
          }
        }).catch(()=>{
           this.showjs = 0;
        })
        .finally(() => {
         
          this.loading = false;
        });
    },

    //身份证输入框失去焦点查询用工单位
    getjsdw(e) {
      console.log('输入框变动，携带value值为：', e.detail.value);
      var that = this;
      this.userinfo.bdsfz = e.detail.value;
      var idcard = e.detail.value;
      jsdw({ formdata: idcard }).then((res) => {
        if (!res.code) {
          // console.log('成功')
          Taro.showToast({ title: '在职单位加载中', icon: 'loading', duration: 1000 });
          this.showjs = res.code;
          this.items = res.data.jsdata;
        }
      });
    },
    getjsdwbk: function (e) {
      var that = this;
      this.userinfo.bdsfz = e.detail.value;
      var idcard = e.detail.value;
      jsdw({ formdata: idcard }).then((res) => {
        if (!res.code) {
          // console.log('成功')
          Taro.showToast({ title: '在职单位加载中', icon: 'loading', duration: 1000 });
          this.showjs = res.code;
          this.itemsbk = res.data.jsdata;
        }
      });
      //   console.log(items)
    },
  },
  mounted() {
    const { title = '', type = '', params = '' } = Current.router.params;
    this.type = type;
    this.params = params;
    Taro.setNavigationBarTitle({
      title,
    });
  },
  created() {
    var that = this;
    var session_id = Taro.getStorageSync('session_id');
    var gsid = Taro.getStorageSync('gsid');
    this.gsid = Taro.getStorageSync('gsid');
    if (session_id.length < 1) {
      Taro.showModal({
        title: '提示',
        content: '需要授权登录后操作',
        success(res) {
          if (res.confirm) {
            Taro.navigateTo({
              url: '/pages/login/index',
            });

            console.log('用户点击确定');
          } else if (res.cancel) {
            console.log('用户点击取消');

            Taro.navigateTo({
              url: '/pages/index/index',
            });
          }
        },
      });
      return;
    }
    homeInfo()
      .then((res) => {
        // console.log(res.data.sfsm);
        this.sfsm = res.data.sfsm;
        console.log(this.sfsm, '大大大大大大大大大大');
      })
      .then((res) => {
        const el = document.getElementById('call');
        el.addEventListener('tap', this.call);
      });

    this.$reguser('', function () {
      //app.loadding();
      that.$getuserbd(function (data) {
        //that.setData({ userinfo: data.data })
        console.log(data, '回调成功................');
        that.userinfo = data.data;
        that.region = [data.data.province, data.data.city, data.data.area];
        that.regionhk = [data.data.hkprovince, data.data.hkcity, data.data.hkarea];
        that.birthday = data.data.birthday;
        that.index = data.data.xueli;

        jsdw({ formdata: data.data.bdsfz }).then((res) => {
          if (!res.code) {
            // console.log('成功')
            Taro.showToast({ title: '在职单位加载中', icon: 'loading', duration: 1000 });
            that.showjs = res.code;
            that.items = res.data.jsdata;
            that.itemsbk = res.data.jsdata;
          }
        });

        //	app.loadding(false);
      });
    });
  },
};
</script>

<style lang="less">
/* pages/my/set.wxss */
page {
  background: #fff;
  font-family: Microsoft Yahei;
  font-size: 30px;
}
.zmShow {
  padding-bottom: 100px;
}
.kfwxh {
  width: 100%;
  text-align: center;
}
.kfwxh1 {
  width: 100%;
  color: #056ba7;
  // text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  // justify-content: space-around;
}
/*暂无*/
.zan-box {
  width: 100%;
  text-align: center;
  margin-top: 40%;
  float: left;
}
.zan-img {
  width: 50px;
  height: 50px;
  display: inline-block;
}
.zan-text {
  display: block;
  text-align: center;
  color: #b8b8b8;
  font-size: 14px;
  width: 100%;
  margin-top: 10px;
}
.set-box {
  width: 100%;
  float: left;
  background: #fff;
  padding: 0 20px;
  box-sizing: border-box;
}
.set-box1 {
  /* width: 100%; */
  display: flex;
  align-items: baseline;
  /* justify-content:center; */
  border-bottom: 1px #ededed solid;
  padding: 30px 0px;
}
.radio-group2 {
  /* height: 70px; */
  width: 500px;
  display: flex !important;
  flex: 1;
  justify-content: space-around;
  /* align-items: center;   */
}
/* .set-boxz {
  width: 100%;
  display:flex;
  align-content: center;
  justify-content: center;
  border-bottom: 1px #ededed solid;
  padding: 12px 0px;
} */
.picker {
  height: 30px;
  line-height: 30px;
  margin-left: 50px;
}
.set-tex1 {
  display: block;
  height: 70px;
  line-height: 70px;
  color: #333;
  float: left;
  margin-right: 15rpx;
  width: 230px;
  text-align: left;
  padding-left: 20px;
}
.set-tex2 {
  display: block;
  height: 100%;
  line-height: 100%;
  color: #333;
  /* float: left; */
  margin-right: 15rpx;
  width: 200px;
  /* text-align: left; */
  padding-left: 20px;
}
.set-inp {
  // height: 70px;
  // line-height: 70px;
  overflow: hidden;
  margin-left: 10px;
  float: left;
  color: #000;
  width: 360rpx;
}
.set-add {
  width: 40px;
  height: 40px;
  margin-left: 10px;
  display: block;
  float: left;
}
.set-textarea {
  border: 1px #ededed solid;
  border-radius: 5px;
  float: left;
  width: 100%;
  box-sizing: border-box;
  height: 80px;
  padding: 5px;
  margin: 8px 0;
  color: #666;
}
.set-btn {
  width: 90%;
  display: block;
  margin: 0 5%;
  height: 70px;
  line-height: 70px;
  background: #056ba7;
  color: #fff;
  font-size: 30px;
  margin-top: 10px;
  margin-bottom: 60px;
  margin-top: 40px;
}

.set-btnbk {
  display: block;
  width: 90%;
  margin: 0 5%;
  height: 70px;
  line-height: 70px;
  background: #45810d;
  color: #fff;
  font-size: 30px;
  margin-top: 30px;
  margin-bottom: 60px;
  margin-top: 40px;
}

.set-radio {
  height: 30px;
  line-height: 30px;
  color: #666;
}
.set-radio radio {
  transform: scale(0.8);
}

.swiper-tab {
  width: 100%;
  border-bottom: 1rpx solid #eee;
  text-align: center;
  height: 90rpx;
  line-height: 90rpx;
  display: flex;
  flex-flow: row;
  font-size: 32rpx;
  justify-content: space-between;
}
.swiper-tab-item {
  width: 50%;
  color: #434343;
}
.active {
  color: #fcfcfc;
  border-bottom: 2rpx solid #1289c0;
  background-color: #1289c0;
  border-radius: 15rpx 15rpx 0 0;
}
.ycy {
  width: 100%;
  display: flex;
  height: 300rpx;

  position: relative;
}
.xz {
  text-align: center;
  color: #06415c;
  line-height: 110rpx;
  height: 110rpx;
  font-weight: bold;
}
.radio {
  width: 100%;
  display: block;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  margin-left: 20px;
}
.skm {
  width: 100px;
  height: 100px;
  font-size: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  right: 0;
  top: 280px;
  image {
    width: 80px;
  }
}
.Ztitle {
  font-size: 50px;
  margin-bottom: 10px;
}
</style>